<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS简介</title>

<!--
  内部样式表
    - 可以通过style标签来创建一个内部样式表
    - 将样式编写到style标签中，降低了代码的耦合，是代码易维护
    - 内部样式表只能在当前页面中生效，无法在不同的页面中进行复用
-->

<!--  <style>-->
<!--    p{-->
<!--      color:red;-->
<!--      font-size: 40px;-->
<!--    }-->

<!--  </style>-->

<!--
    外部样式表
        - 外部样式表，指将样式编写到外部的css文件中
            然后通过link标签引入外部的样式

        - 通过外部样式表，将结构和表现完全分离，是代码易于维护
            同时代码可以在不同的页面之间进行复用
            并且外部文件可以利用到浏览器的缓存机制，加快用户的访问速度

     内联样式（不推荐）
     内部样式表（亦可）
     外部样式表（推荐使用）
-->
    <link rel="stylesheet" href="style.css">

</head>
<body>
<!--
  CSS
    - 层叠样式表
    - 通过CSS可以为网页中的元素设置各种样式，让页面变得更加漂亮
-->

<!--
  内联样式（行内样式）：
    - 可以直接将CSS编写到元素的style属性中
    - 一个网页分为三个部分：
        结构、表现和行为
        一个设计优良的网页，最好要把结构、表现和行为三者分离

    - 将样式直接编写到style属性中，使得代码变得不容易维护，不推荐使用
-->
<!--<p style="color:red; font-size:40px;">老阮不狂谁会得，出门一笑大江横</p>-->
<p>老阮不狂谁会得，出门一笑大江横</p>
<p>飞流直下三千尺，疑是银河落九天</p>

</body>
</html>